<template>
    <div class="app-container">
        <permissionFrom
            @handleQuery="handleQuery"
            :type="queryParams.menu_type"
        ></permissionFrom>

        <!-- 工具栏 -->
        <sysQueryutils
            @handleQuery="handleQuery"
            @toolClick="toolClick"
            :btnList="menuBtnList"
        ></sysQueryutils>

        <el-tabs
            v-model="activeName"
            class="demo-tabs mt-20px"
            @tab-change="tableChange"
        >
            <el-tab-pane label="后台菜单" name="1">
                <!-- 菜单权限表格和弹窗 -->
                <menuManagerTable
                    ref="menuRef"
                    :loading="loading"
                    :menuTableData="menuOrappTableData"
                    @handleQuery="handleQuery"
                ></menuManagerTable>
            </el-tab-pane>

            <el-tab-pane label="app / 小程序" name="2">
                <appManagerTable
                    ref="appRef"
                    :appTableData="menuOrappTableData"
                    :loading="loading"
                    @handleQuery="handleQuery"
                ></appManagerTable
            ></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import MenuAPI, { MenuQuery, MenuVO } from "@/api/system/menu";
import { appVO } from "@/views/system/permissionManager/index";
import { menuBtnList } from "@/views/system/permissionManager";

const menuRef = ref();
const appRef = ref();
const loading = ref(false);
// tab切换

const activeName = ref("1");

// 查询参数
const queryParams = reactive<MenuQuery>({
    menu_type: "1",
    keywords: "",
});

// 菜单表格数据 / app表格数据
const menuOrappTableData = ref<MenuVO[] | appVO[]>([]);

// 切换表格
const tableChange = (type: any) => {
    queryParams.menu_type = type;
    handleQuery();
};

// 工具列表点击
async function toolClick(item: any) {
    switch (item.name) {
        case "新增":
            if (queryParams.menu_type === "1") {
                menuRef?.value.handleOpenDialog(0);
            }
            if (queryParams.menu_type === "2") {
                appRef?.value.handleOpenDialog();
            }

            break;
        default:
            break;
    }
}

// 查询菜单
function handleQuery(keywords: string = "") {
    queryParams.keywords = keywords;
    loading.value = true;
    MenuAPI.getList(queryParams)
        .then((data) => {
            menuOrappTableData.value = data;
        })
        .finally(() => {
            loading.value = false;
        });
}

onMounted(() => {
    handleQuery();
});
</script>

<style lang="scss" scoped>
.common_sty {
    padding: 0px 33px 27px 33px;
    background: #ecf0fe;
}
.app-container {
    @extend .common_sty;
    /* 57px = navbar = 57px */
    height: calc(100vh - 57px);
    overflow-y: scroll;
}

/** 开启tag标签  */
.hasTagsView {
    .app-container {
        @extend .common_sty;
        /* 84px = navbar + tags-view = 83px + 73px */
        height: calc(100vh - 141px);
        overflow-y: scroll;
        padding: 0px 33px 23px 33px;
    }
}
</style>
